<template>
  <div class="page">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPages"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="orderList.length"
    >
    </el-pagination>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("order");
export default {
  data() {
    return {
      currentPages: 1,
      pagesizes: 5, //默认每页数据
    };
  },
  mounted() {
    this.currentPages = this.currentPage
    this.pagesizes = this.pageSize
  },
  methods: { 
    ...mapActions([
      "set_page","set_order","set_size"
    ]),
    handleSizeChange(val) {
      this.set_size(val);
    },
    handleCurrentChange(val) {
      this.set_page(val);
    },
  },
  computed: {
    ...mapState({
      orderList: (state) => state.orderList,
      currentPage: (state) => state.currentPage,
      pageSize: (state) => state.pageSize,
    }),
  },
};
</script>
<style scoped></style>